<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>duowutiyundongbiankuan</title>
</head>
<style>
	div {
		width: 200px;
		height: 100px;
		background: red;
		margin: 30px;

	}
</style>
<script>
	window.onload = function ()
	{

		var aDiv = document.getElementsByTagName("div");
		for (var i = 0; i < aDiv.length; i++)
		{
			aDiv[i].timer=null;
			aDiv[i].onmouseover = function ()
			{
				startMove(this, 800);
			};
			aDiv[i].onmouseout = function ()
			{
				startMove(this, 200);
			}
		}




		function startMove(obj, iTarget)
		{
			clearInterval(obj.timer);
			obj.timer = setInterval(function ()
			{
				var speed = (iTarget - obj.offsetWidth) / 6;
				speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
				if(obj.offsetWidth == iTarget)
				{
					clearInterval(obj.timer);
				}
				else
				{
					obj.style.width = obj.offsetWidth + speed + "px";
				}
			}, 30)

		}
	}
</script>
<body>
<div></div>
<div></div>
<div></div>

</body>
</html>